<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书类别管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<script src="../../js/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../layuilay/layui.js" charset="utf-8"></script>
		<link rel="stylesheet" href="../../layuilay/css/layui.css"  media="all">
	</head>
	<body>
	      <!-- 检索框开始———————————————————— -->
		<div class="layuimini-container">
			<div class="layuimini-main">
				<fieldset class="layui-elem-field layuimini-search">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">类别名称</label>
									<div class="layui-input-inline">
										<input type="text" id="c_name"  autocomplete="off"
											class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="searchBtn()"><i class="layui-icon">&#xe615</i></button>
								</div>
							</div>
						</form>
					</div>
				</fieldset>
	
		<!-- 检索框结束 -->
			
	
<div id = "tb"  style="display:none">
<button type="button" id="importData" class="layui-btn layui-btn-primary layui-btn-radius">导入</button>
<button type="button" onclick="exportData()"  class="layui-btn layui-btn-primary layui-btn-radius">导出</button>
<button type="button" onclick="addbtn()" class="layui-btn"><i class="layui-icon">&#xe608;</i>添加</button>
</div> 
	<table class="layui-hide" id="test" lay-filter="test"></table>
<script src="../../layuilay/layui.js" charset="utf-8"></script>
 <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
</div>
</div>

<script>
layui.use('jquery',function(){
	var $=layui.$;
	$(function(){
		searchBtn();
		    
		})
}) 
var tableObj;
	function searchBtn(){
		  var c_id=$("#c_id").val();
		   var c_name=$("#c_name").val();		   
layui.use(['table','upload','laydate','form'], function(){
	  var table = layui.table;
	  var upload = layui.upload;
	  var laydate=layui.laydate;
	  var form = layui.form;
  
  tableObj= table.render({
    elem: '#test'
    	,toolbar:"#tb"
    ,url:'../../querybookcateAll'
    	,where:{
    		classId:c_id,
    		className:c_name
			 
            }
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
    	{field: 'classId', title: '类别编号', sort: true, fixed: 'left'}
        ,{field: 'className', title: '类别名称'}
        ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
    ,page: true
  });
 }); 
}


</script>
<script >
//点击添加按钮
var index;
var uindex;

function addbtn(){
	  layui.use(["layer","jquery"],function(){
		var layer = layui.layer;
		var $= layui.$;
		index = layer.open({
			type:1
			,title:"图书类别添加",
			content:$("#addusewin")
			,area:["436px","300px"]
		})
	})	
}
//点击添加保存
function addbook(){
		var addclassName=$("#addclassName").val();
	  	$.post("../../insertbookcategory",{	  	
	  		className:addclassName
	  	},function(res){
	  		if(res.success){
	  			layer.msg(res.message);
	  			layer.close(index);
	  			tableObj.reload();
	  		}
	  	},"json");
	}
//点击修改按钮
layui.use(['table','form','jquery'],function(){
	var table=layui.table;
	var form=layui.form;   
	var $=layui.$; 
	  table.on('tool(test)',function(obj){
			 var data = obj.data;
			if(obj.event === 'edit'){
		    	form.val("fm",data);
				    uindex =  layer.open({
				    	 type:1
				    	 ,title:"修改"
				    	 ,content:$("#updatewin")
				    	 ,area:["436px","300px"]
				     })
		     }
		})
})
//点击修改保存
function updatebtn(){
		var upclassId=$("#upclassId").val();
		var upclassName=$("#upclassName").val();
	  	$.post("../../updatebookcategory",{	
	  		classId:upclassId,
	  		className:upclassName
	  	},function(res){
	  		if(res.success){
	  			layer.msg(res.message);
	  			layer.close(uindex);
	  			tableObj.reload();
	  		}
	  	},"json");
	}
</script>
<!--添加窗体  -->
<div  id="addusewin" style="display:none">
<form class="layui-form" action="">
			     <div class="layui-form-item">
			    <label class="layui-form-label">类别名称：</label>
			    <div class="layui-input-inline">
			      <input type="text"  id="addclassName" name="className" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			  </div>
		  <div class="layui-form-item">
		    <div class="layui-input-block">
		    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="addbook()">立刻添加</button>
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		  </div>
		  </form>
</div>

<!--修改窗体  -->
<div  id="updatewin" style="display:none">

<form class="layui-form" action="" lay-filter="fm">
		     	   
			  <div class="layui-form-item" style="display: none;">
			    <label class="layui-form-label">图书类别编号：</label>
			    <div class="layui-input-inline">
			    <input type="text"  id="upclassId" name="classId" placeholder="" autocomplete="off" class="layui-input"> 
			       
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">图书类别名：</label>
			    <div class="layui-input-inline">
			      <input type="text"  id="upclassName" name="className" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			  </div>	
			  
			   <div class="layui-form-item">
		    <div class="layui-input-block">
		    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="updatebtn()">立刻修改</button>
		     
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		  </div>
		  </form>
</div>
	</body>
</html>